<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            	<!--script src="../src/js/lib/jquery.js"></script-->
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1 style="margin-left:50px;">A sample C-test</h1>

        <script id='keyDown' type='text/x-cindyscript'>
            if(keycode()==39,curleft());
            if(keycode()==37,curright());
            if(keycode()==38,curup());
            if(keycode()==40,curdown());
            if(keycode()==8,backspace());
            if(keycode()==9,nextword());
            if(indexof(letters,key())!=0,
              insertkey(key());
            );

        </script>


        <script id='mouseDown' type='text/x-cindyscript'>
            movecursortomouse();


        </script>


        <script id='initialization' type='text/x-cindyscript'>

                    letters  ="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                    letterssm="abcdefghijklmnopqrstuvwxyz";



text1="Within the City of Westminster, the entertainment district of the West End has its focus around Leicester Square, where London and world film premieres are held, and Piccadilly Circus, with its giant electronic advertisements. London's theatre district is here, as are many cinemas, bars, clubs and restaurants, including the city's Chinatown district (in Soho), and just to the east is Covent Garden, an area housing speciality shops. The city is the home of Andrew Lloyd Webber, whose musicals have dominated the West End theatre since the late 20th century. The United Kingdom's Royal Ballet, English National Ballet, Royal Opera and English National Opera are based in London and perform at the Royal Opera House, the London Coliseum, Sadler's Wells Theatre and the Royal Albert Hall as well as touring the country.";

text2="Elephant trunks have multiple functions, including breathing, olfaction, touching, grasping, and sound production. The animal's sense of smell may be four times as sensitive as that of a bloodhound. The trunk's ability to make powerful twisting and coiling movements allows it to collect food, wrestle with other elephants, and lift up to 350 kg (770 lb). It can be used for delicate tasks, such as wiping an eye and checking an orifice, and is capable of cracking a peanut shell without breaking the seed. With its trunk, an elephant can reach items at heights of up to 7 m (23 ft) and dig for water under mud or sand. Individuals may show lateral preference when grasping with their trunks: some prefer to twist them to the left, others to the right. Elephants can suck up water both to drink and to spray on their bodies.";


text3="300,000 iPads were sold on their first day of availability. By May 3, 2010, Apple had sold a million iPads, this was in half the time it took Apple to sell the same number of first generation iPhones. After passing the one million mark they continued selling rapidly reaching 3 million sales after 80 days. During the October 18, 2010, Financial Conference Call, Steve Jobs announced that Apple had sold more iPads than Macs for the fiscal quarter. In total, Apple sold more than 15 million first-generation iPads prior to the launch of the iPad 2. — selling more than all other tablet PCs combined since the iPad's release and reaching 75% of tablet PC sales at the end of 2010.";

text4="In the 1960s, the modeling world was just starting to establish modeling agencies. Throughout Europe, secretarial services acted as models' agents charging them weekly rates for their messages and bookings. For the most part, models also were responsible for their own billing. In Germany, agents were not allowed to work for a percentage of someone else earnings. As a result, they referred to themselves as secretaries. It was also because of this that most models did not travel. With the exception of a few models traveling to Paris or New York, traveling was relatively unheard of for a model.";

text=tokenize(text1," ",autoconvert->false);


cw=0.5;
ch=-1;
max=50;
lines=15;
posword=0;
posletter=0;
curx=0;
cury=0;
grid=zeromatrix(60,40);
last=(0,0);

isletter(c):=(
    (indexof(letters,c)!=0) % (indexof(letterssm,c)!=0);
);

insertkey(c):=(
  if(posword!=0,
      there=(text_posword)_posletter;
      if(indexof(letterssm,there)!=0,
        c=letterssm_(indexof(letters,c));
       );
     (fills_posword)_posletter=c;
  );
  nextgap();
);


backspace():=(
  curright();
  adjustcurpos();
  if(posword!=0,
     (fills_posword)_posletter="+";
  );
);


movecursortomouse():=(
  mx=mouse().x+9;
  my=mouse().y-8;

  curx=floor(mx/cw);
  cury=floor(my/ch)+1;

);


gapword(word,count):=(
  r=random();
  if((r<.5) % (count<15)  ,
     word
    ,
     s="";
     apply(1..length(word),i,
     if((2*i>length(word)) & isletter(word_i),
      s=s+"_",
      s=s+(word_i));
    );
     s;
    );
);

fillword(word):=(
    s="";
    apply(1..length(word),s=s+"+");
    s;
);


curleft():=(
  finalposition=false;
  curx=curx+1;
  if(curx>max+2,
    if(cury<=lines+1, curx=0;cury=cury+1;
    ,
    curx=curx-1;
    finalposition=true;)
  );
);

curright():=(
  curx=curx-1;
  if(curx<0,
    if(cury>0, curx=max+2;cury=cury-1;
    ,
    curx=curx+1)
  );
);


curdown():=(
  if(cury<=1+lines,cury=cury+1);
);

curup():=(
  if(cury>0, cury=cury-1);
);

count=0;
gaps=apply(text,count=count+1;gapword(#,count));
fills=apply(text,fillword(#));
positions=zerovector(length(text));

prepare(tt):=(
  checking=false;
  solving=false;
  curx=0;
  cury=0;
  grid=zeromatrix(60,40);
  text=tokenize(tt," ",autoconvert->false);
  count=0;

  gaps=apply(text,count=count+1;gapword(#,count));
  fills=apply(text,fillword(#));
  positions=zerovector(length(text));
  drawing();
  nextword();
);


drawword(i,j,word,gap,fill,ind):=(
  correct=false;
  if(checking % solving,
     correct=true;
     apply(1..length(word),k,
       p=gap_k;
       q=fill_k;
       w=word_k;
       if(p=="_",
          if(w!=q,correct=false);
       )
     )

  );



  apply(1..length(word),k,
     p=gap_k;
     q=fill_k;
     w=word_k;
     r=p;
     if(i+k-1==curx & j==cury,
           posword=ind;
           posletter=k;
        );
     grid_(i+k)_(j+1)=p;

     col=(0,0,1);
     if(checking % solving,
       if(correct,
         col=(0,.7,0),
         col=(.8,0,0)
    );
     );
     if(p=="_",last=(i+k,j+1);
        if(isletter(q), r=q);
        if(solving, r=w);
        if(r!=p,
          drawtext(((i+k-1)*cw,j*ch),r,family->"Courier",bold->true,size->20,color->col),
          drawtext(((i+k-1)*cw,j*ch),r,family->"Courier",bold->true,size->18,color->col))

        ,
        drawtext(((i+k-1)*cw,j*ch),r,family->"Courier",size->20)


     );

  );
);

testword(i,j,gap,ind):=(
  apply(1..length(gap),k,
     if(i+k-1==curx & j==cury,
           posword=ind;
           posletter=k;
        );
  );
);

endreached():=(
 (last_2<cury-1 % (last_2<=cury-1 & last_1>curx))
);

nextword():=(
  while(grid_(curx+1)_(cury+1)=="_" & !endreached(),
    curleft();
    );
    nextgap();
);




nextgap():=(
  curleft();
  while(grid_(curx+1)_(cury+1)!="_" & !endreached() & !finalposition,
    curleft();
    );
);

adjustcurpos():=(
  posword=0;
  posletter=0;

  i=0;
  j=0;
  apply(1..length(gaps),ind,
    gap=gaps_ind;
    if(i+length(gap)>max, i=0;j=j+1);
    testword(i,j,gap,ind);
    i=i+length(gap)+1;
  );

);

drawcursor():=(
  p=(curx*cw,cury*ch+ch/4);
  fillpoly([p,p+(cw,0),p+(cw,-ch),p+(0,-ch)],color->(.7,.7,1));
);

buttonClicked():=(
   checking=!checking;
);



drawing():=(

  clrscr();
  fillcircle((0,0),30,color->(1,.9,.7));

  gsave();
  translate((-9,8));

  drawcursor();

  posword=0;
  posletter=0;

  i=0;
  j=0;
  apply(1..length(gaps),ind,
    word=text_ind;
    gap=gaps_ind;
    fill=fills_ind;
    if(i+length(word)>max, i=0;j=j+1);

    drawword(i,j,word,gap,fill,ind);
    positions_ind=(i,j);
    i=i+length(word)+1;
  );

  grestore();
);

checking=false;
solving=false;
drawing();
nextword();



        </script>


<script id='csmove' type='text/x-cindyscript'>

drawing();




</script>



<div onkeyup="displayunicode(event)">
        <div  id="CSCanvas" style="width:700px; height:500px; border:2px solid #000000" ></div>
</div>
        <script>

            var gslp=[

                                           ];
            var cdy = CindyJS({canvasname:"CSCanvas",
                        movescript:"csmove",
                        keydownscript:"keyDown",
                        mousedownscript:"mouseDown",
                        initscript:"initialization",
                        geometry:gslp});

           sel =function(type){
             cdy.evokeCS('prepare('+type+');')

           }

        </script>




        <button onclick="cdy.evokeCS('buttonClicked()')" type="button" style="position:absolute; top:620px;left:60px" >Check Entries</button>

        <button onclick="cdy.evokeCS('solving=!solving')" type="button" style="position:absolute; top:620px;left:210px" >Solve</button>

<select onchange="sel(this.value)" style="position:absolute; top:620px;left:360px">
  <option value="text1">Travel (London)</option>
  <option value="text2">Animals (Elephants)</option>
  <option value="text3">Technology (iPad)</option>
  <option value="text4">Fashion (model)</option>
</select>


	</body>
</html>
